import React, { useEffect, useRef, useState } from 'react'
import { Observable, share, tap, shareReplay, interval, take } from 'rxjs'
import './App.css'

function App() {

  const log = (name, source) => source.pipe(
    tap({
      subscribe: () => console.log(`${ name }: subscribed`),
      next: value => console.log(`${ name }: ${ value }`),
      complete: () => console.log(`${ name }: completed`),
      finalize: () => console.log(`${ name }: unsubscribed`)
    })
  );
   
  useEffect(() => {
    const obs$ = log('source', interval(1000));
   
    const shared$ = log('shared', obs$.pipe(
      shareReplay({ bufferSize: 1, refCount: true }),
      take(2)
    ));
     
    shared$.subscribe(x => console.log('sub A: ', x));
    shared$.subscribe(y => console.log('sub B: ', y));
  }, [])

  // var observable1 = Observable.create((observer) => {
  //   observer.next('Observable One is alive: ' + Date.now());
  // }).pipe(share());
  // var subscription1 = observable1.subscribe(
  //     (x) => console.log(x, '1')
  // );
  // var subscription2 = observable1.subscribe(
  //     (x) => console.log(x, '2')
  // );

  // useEffect(() => {
  //   const subs = test$.pipe(
  //     tap(() => {
  //       console.log('before console')
  //     }),
  //     shareReplay()
  //   ).subscribe(() => {
  //     console.log('alsjdalsjd')
  //   })
  //   return () => {
  //     subs.unsubscribe();
  //   }
  // }, [])

  const ref = useRef(null);

  const [showDiv, setShowDiv] = useState(true);

  useEffect(() => {
    if (ref.current.clientHeight !== ref.current.scrollHeight) {
      setShowDiv(true)
    } else {
      setShowDiv(false)
    }
  }, [])

  console.log(ref.current?.clientHeight, ref.current?.scrollHeight)

  const handleScroll = () => {
    if (ref.current.scrollTop === ref.current.scrollHeight - ref.current.clientHeight) {
      setShowDiv(false)
    } else {
      setShowDiv(true)
    }
  }

  return (
    <div className="App">
    

<div class="parent">
  <div class="child child-min-width">
    <p class="truncate">
      I'm happy to shrink past my minium intrinsic width now :)
    </p>
  </div>
  
  <div class="child child-min-width">
    <p class="truncate">
      I'm happy to shrink past my minium intrinsic width now :)
    </p>
  </div>
  
  <div class="child child-min-width">
    <p class="truncate">
      I'm happy to shrink past my minium intrinsic width now :)
    </p>
  </div>
  
  <div class="child child-min-width">
    <p class="truncate">
      I'm happy to shrink past my minium intrinsic width now :)
    </p>
  </div>
</div>
      <div className='scroll' ref={ref} onScroll={handleScroll}>
        <div className="overflow"/>
      </div>
      <div className={showDiv ? "divider" : 'noDiv'}></div>
      <div className="footer">

      </div>
    </div>
  )
}

export default App
